<!--<script src="Public/scripts/WorkEmployed.js.php"></script>
<script src="Public/scripts/LoadSelect.js.php"></script>-->
<section class="three fourths padded  bounceInDown animated  align-bottom-desktop" onload="">

    <center >

        <h3>Usuarios del Sistema</h3>
        <!--        <div id="toolbar" class="ui-widget-header ui-corner-all">-->
        <button onclick="_onLoadPage('User','Register')">Agregar</button> 
        <button onclick="_onLoadPage('User','Register')">Exportar</button> 
        <button onclick="_onLoadPage('User','Register')">Imprimir</button> 




        <!--</div>-->
        <table class="" style="border: #2B2B2D;" id="tableListUser" onload="">
            <tr>
                <td style="width: 250px">
                    <h4> <b><?php echo Class_message::get('TxtNameAndLastNames') ?></b>   </h4>
                </td>
                <td style="width: 250px"></h4>
                    <h4> <b><?php echo Class_message::get('TxtUserName') ?></b>
                </td>
                <td style="width: 150px">
                    <h4> <b><?php echo Class_message::get('TxtTyeUser') ?></b></h4>
                </td>
                <td style="width: 100px">

                </td>
                <td style="width: 100px">

                </td>

                </td>
        </table>
        <div id="dialog-form" title="Modificando Usuario" style="display: none">
            <form>
                <table>
                    <tr>
                        <th>
                            Nombres
                        </th>
                        <th style="width: 300px">
                            <input disabled="true" type="text" id="txtModifyUser_id" style="display: none">
                            <input disabled="true" type="text" id="txtModifyUserName">
                        </th>
                    </tr>
                    <tr>
                        <th>
                            Usuario
                        </th>
                        <th style="width: 200px">
                            <input disabled="true" type="text" id="txtModifyUser">
                        </th>
                    </tr>
                    <tr>
                        <th>
                            Tipo de Usuario
                        </th>
                        <th style="width: 200px">
                            <select  type="text" id="txtModifyUserType">
                                <!--                                <option value="1">Programador</option>
                                                                <option value="2">Administrador</option>-->
                            </select>
                        </th>
                    </tr>
                </table>
            </form>
        </div>
        <?php // require 'Register.tpl.php';?>
        <script type="text/javascript">
            function _openRegister() {
                $("#dialoRegister").dialog("open");
            }
          
//              _listUser();
            $(window).load(function() {
//                 _listUser();
                alert("_laist")
            });



            // id,name,user,typeUser
            function _openModifyUser(id, name, user, typeUser) {
//                console.log(id + " " + name + " " + user);
                $('#txtModifyUser_id').val(id);
                $('#txtModifyUserName').val(name);
                $('#txtModifyUser').val(user);
                $('#txtModifyUserType').val(typeUser);
                $("#dialog-form").dialog("open");


            }
            function _openRegisterUser() {

                $("#dialoRegister").dialog("open");


            }

            function _deleteUser(id) {
                $.post(
                        "<?php echo Class_config::get('urlApp') ?>/?controller=User&&action=Delete",
                        {pkUser: id},
                function(data) {
                    alert("Se ha eliminado Correctamente");
                    _listUser();
                }

                );
            }

            $("#dialog-form").dialog({
//                resizable: false,
                height: 300,
                width: 500,
                autoOpen: false,
                modal: true,
                buttons: {
                    "Modificar": function() {

                        $.post(
                                "<?php echo Class_config::get('urlApp') ?>/?controller=User&&action=Update",
                                {pkUser: $('#txtModifyUser_id').val(), fkTypeUser: $('#txtModifyUserType').val()},
                        function(data) {

                            $("#dialog-form").dialog("close");

                            _listUser();

                        }

                        );

                    },
                    "Cancelar": function() {
                        $(this).dialog("close");
                    }
                }
            });
//            $("#dialoRegister").dialog({
////                resizable: false,
//                height: 300,
//                width: 500,
//                autoOpen: false,
//                modal: true,
//                buttons: {
//                    "Cancelar": function() {
//                        $(this).dialog("close");
//                    }
//                }
//            });

            $.getJSON('<?php echo Class_config::get('urlApp') ?>/?controller=TypeUser&&action=List', function(data) {
                $('#txtModifyUserType option').remove();
                for (var i = 0; i < data.length; i++) {

//                    $('#cmbRegisterTypeUser').append("<option value=\"" + data[i].pkTypeUser + "\">" + data[i].description + "</option>")
                    $('#txtModifyUserType').append("<option value=\"" + data[i].pkTypeUser + "\">" + data[i].description + "</option>")
//                    $('#cmbTypeUserModifyPermissions').append("<option value=\"" + data[i].pkTypeUser + "\">" + data[i].description + "</option>")
                }

            });

        </script>
        <script>
            $(function() {
                $("#beginning").button({
                    text: false,
                    icons: {
                        primary: "ui-icon-disk"
                    }
                });
                $("#rewind").button({
                    text: false,
                    icons: {
                        primary: "ui-icon-seek-prev"
                    }
                });
                $("#play").button({
                    text: false,
                    icons: {
                        primary: "ui-icon-play"
                    }
                })
                        .click(function() {
                            var options;
                            if ($(this).text() === "play") {
                                options = {
                                    label: "pause",
                                    icons: {
                                        primary: "ui-icon-pause"
                                    }
                                };
                            } else {
                                options = {
                                    label: "play",
                                    icons: {
                                        primary: "ui-icon-play"
                                    }
                                };
                            }
                            $(this).button("option", options);
                        });
                $("#stop").button({
                    text: false,
                    icons: {
                        primary: "ui-icon-stop"
                    }
                })
                        .click(function() {
                            $("#play").button("option", {
                                label: "play",
                                icons: {
                                    primary: "ui-icon-play"
                                }
                            });
                        });
                $("#forward").button({
                    text: false,
                    icons: {
                        primary: "ui-icon-seek-next"
                    }
                });
                $("#end").button({
                    text: false,
                    icons: {
                        primary: "ui-icon-seek-end"
                    }
                });
                $("#shuffle").button();
                $("#repeat").buttonset();
            });
        </script>
    </center>
</section>

